/*
 * @Author: your name
 * @Date: 2023-10-25 15:54:48
 * @LastEditTime: 2023-10-25 15:59:59
 * @LastEditors: Please set LastEditors
 * @Descripttion: In User Settings Edit
 * @FilePath: /bicycle-mobile-old/h5/src/components/infoItem/index.jsx
 */
import React, { useEffect, useState } from 'react'
import styles from './index.less'
import addIcon from '../../assets/info/addIcon.png';
import { Uploader, } from 'react-vant';
import { postFile } from '../../servers/service.js';

function Index (props) {

  const [tasks, setTasks] = useState([])

  useEffect(() => {
    if (props.value === undefined) return
    let arr = props.value
    setTasks(arr)
  }, [props.value])


  const innerChange = (items) => {
    setTasks(items)
    items.map((item) => {
      delete item.file
    })
    props.onChange?.(items)
  }

  return (
    <div className={styles.imgUploader}>
      <div className={props?.type === 3 ? styles.myUpload3 : props?.type === 1 ? styles.myUpload1 : styles.myUpload2}>
        <Uploader
          value={tasks}
          upload={(file) => {
            try {
              const formData = new FormData();
              formData.append('file', file);
              let data = postFile(formData)
              return data
            } catch (error) {
              return null
            }
          }}
          imageFit="contain"
          maxCount={props?.maxCount}
          onChange={innerChange}

        >

          <div className={`${styles.upload} ${props?.type === 2 || props?.type === 3 ? styles.img2 : styles.img1}`}>
            <img src={addIcon} className={styles.addIcon} />
            <div>上传图片</div>
          </div>
        </Uploader>
      </div>
    </div>
  )
}

export default Index
